<template>
  <el-form
    ref="form"
    label-width="160px"
    :model="form"
    :rules="rules"
  >
    <el-row>
      <el-col :span="12">
        <el-form-item label="证件有效开始时间" prop="effectiveStartDate">
          <el-date-picker
            v-model="form.effectiveStartDate"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd"
            style="width: 100%"
            placeholder="请选择证件有效开始时间"
            :disabled="disabled">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="证件有效结束时间" prop="effectiveEndDate">
          <el-date-picker
            v-model="form.effectiveEndDate"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd"
            style="width: 100%"
            placeholder="请选择证件有效结束时间"
            :disabled="disabled"
          >
          <!-- :picker-options="endTimeOptions" -->
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="身份证人像面" prop="frontList">
          <dt-upload v-model="form.frontList" :fileSize="50" :list-type="'picture-card'"
                     :disabled="disabled" @input="handleInput(form.frontList, 2)" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="身份证国徽面" prop="oppositeList">
          <dt-upload v-model="form.oppositeList" :fileSize="50" :list-type="'picture-card'"
                     :disabled="disabled" @input="handleInput(form.oppositeList, 1)" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { recognition } from '@/api/information/index'
import { handleImage, formatDate } from '../../utils'
import { zeroFill } from '@/utils/index.js'

const CARD_INFO = {
  idCard: '',
  startTime: '',
  endTime: ''
}

export default {
  props: {
    idCardNumber: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        effectiveStartDate: '',
        effectiveEndDate: '',
        frontList: [],
        oppositeList: []
      },
      rules: {
        effectiveStartDate: [{ required: true, trigger: 'change', message: '请选择证件有效开始时间' }],
        effectiveEndDate: [{ required: true, trigger: 'change', message: '请选择证件有效结束时间' }],
        frontList: [{ required: true, trigger: 'change', message: '请上传身份证人像面' }],
        oppositeList: [{ required: true, trigger: 'change', message: '请上传身份证国徽面' }]
      }
    }
  },
  methods: {
    echoData(data) {
      const obj1 = data.find((item) => item.type == '1')
      const obj2 = data.find((item) => item.type == '2')
      // console.log(obj1);
      this.form.effectiveStartDate = obj1.effectiveStartDate
      this.form.effectiveEndDate = obj1.effectiveEndDate
      this.form.frontList = handleImage(obj2)
      this.form.oppositeList = handleImage(obj1)
    },
    handleInput(item, i) {
      recognition({
        fileId: item[0].fileId,
        recognitionType: i
      }).then((res) => {
        if (i == 1) { // 身份证国徽面
          CARD_INFO.startTime = formatDate(res.data.idCardEffectiveStartDate)
          CARD_INFO.endTime = formatDate(res.data.idCardEffectiveEndDate)
          if (CARD_INFO.startTime) {
            this.form.effectiveStartDate = CARD_INFO.startTime
          }
          if (CARD_INFO.endTime) {
            this.form.effectiveEndDate = CARD_INFO.endTime
          }
        } else { // 身份证人像面
          CARD_INFO.idCard = res.data.idCard
        }
      })
    },
    init() {
      this.form = {
        effectiveStartDate: '',
        effectiveEndDate: '',
        frontList: [],
        oppositeList: []
      }
      this.$refs.form.resetFields()
    },
    submit() {
      return this.form
    },
    validate() {
      let resultSts
      this.$refs.form.validate((result) => {
        resultSts = result
      })
      if (CARD_INFO.idCard && CARD_INFO.idCard != this.idCardNumber) {
        setTimeout(() => {
          this.$message.warning('上传的身份证和企业保存的身份证不同，不允许认证')
        }, 100)
        return false
      }
      const nowTime = new Date().getTime()
      const endTime = new Date(this.form.effectiveEndDate).getTime()
      if (!isNaN(endTime) && endTime < nowTime) {
        setTimeout(() => {
          this.$message.warning('身份证有效期结束日期应该在当前时间之后')
        }, 100)
        return false
      }

      return resultSts
    }
  }
}
</script>

<style lang="scss" scoped>
.img-wrap {
  text-align: center;
}
.img-box {
  position: relative;
  display: inline-block;
  width: 240px;
  .el-image {
    width: 240px;
    min-height: 160px;
    background-color: #f5f7fa;
  }
  .image-slot i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
  }
  .image-slot {
    width: 240px;
    height: 240px;
    background-color: #0000;
  }
}
</style>
